<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-获取dom对象.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div>div元素123</div>
    <div>div元素456</div>
    <input type="text" class="iinn" />
    <script>
      /* 
      dom对象 是浏览器自动帮我们创建好了  
      1 div标签也会被 浏览器自动生成一个dom对象
      2 input 标签 也会被 浏览器 自动生成一个dom对象 

      3 获取下 dom对象
       */

      // document.querySelector("你要获取哪个dom元素呀，这个dom元素的选择器告诉我")
      // document.querySelector("选择器就是指学习过css选择器")

      // let divDom = document.querySelector('div');
      // dom对象 应该也是 {属性名:属性值}
      // console.log(divDom); // <div>div元素</div>

      // console.log 如果输出的是一个 dom对象，就把标签的模样显示出来
      // 我们在输出打印 dom对象的时候 不再使用 console.log , console.dir()
      // console.dir(divDom); // <div>div元素</div>

      // 我想要获取一下 input标签的 dom对象
      let inputDom = document.querySelector('div');// 找不到元素 输出 null 

      console.dir(inputDom);



      /* 
      小结
      1 想要获取页面的标签 可以通过  document.querySelector(选择器)
      2 querySelector 只能够获取第一个满足条件的标签
      3 如果选择器找不到元素 querySelector 只会返回 null 
      4 如果我们想要输出和打印 dom元素
        不要再使用 console.log
        改为 使用  console.dir 
       */
    </script>
  </body>
</html>
